<template>
  <div class="colorPicker" @mousedown="move" id="colorPicker" v-show="visible">
    <div class="close-btn" @click="closeColorPicker">X</div>
    <el-tabs type="border-card">
      <el-tab-pane :label="item.name" v-for="(item,index) in tabs" :key="index">
        <div class="color-level-select">
          <el-select v-model="colorLevel">
            <el-option
              v-for="(itemz,index) in colorLevels"
              :key="index"
              :value="itemz"
              :label="itemz"
            ></el-option>
          </el-select>
        </div>
        <ul class="color-content">
          <template v-for="(color,i) in item.colors">
            <li :key="i" v-if="color.num == colorLevel">
              <ul class="color-item" @click.stop="getColor(color.color)">
                <li
                  v-for="(itemc,index) in color.color"
                  :key="index"
                  :style="{background:'#' + itemc}"
                ></li>
                <li class="bottom"></li>
              </ul>
            </li>
          </template>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import color from './colors'
export default {
  name: 'ColorPicker',
  props: {
    left: {
      default: '25%'
    },
    top: {},
    bottom: {
      default: '15px'
    },
    curClickLayer: {}
  },
  data () {
    return {
      visible: true,
      colorLevel: 3,
      colorLevels: [3, 4, 5, 6, 7, 8, 9],
      tabs: [
        {
          name: '持续过渡色',
          colors: []
        },
        {
          name: '发散颜色',
          colors: []
        },
        {
          name: '单值颜色',
          colors: []
        }
      ]
    }
  },
  created () {
    this.calData() // 初始化颜色值
  },
  mounted () {
    this.calPosition()
  },
  methods: {
    calPosition () {
      const odiv = document.getElementById('colorPicker')
      odiv.style.position = 'absolute'
      odiv.style.left = this.left
      if (this.top) {
        odiv.style.top = this.top
      } else {
        odiv.style.bottom = this.bottom
      }
    },
    getColor (color) {
      this.$emit('colors', color)
    },
    closeColorPicker () {
      this.visible = !this.visible
      this.$emit('close')
    },
    calData () {
      const data = color.data.items.item
      for (const item of data) {
        const arr = item
        switch (item.type) {
          case 'seq':
            this.tabs[0].colors.push(arr)
            break
          case 'div':
            this.tabs[1].colors.push(arr)
            break
          case 'qual':
            this.tabs[2].colors.push(arr)
            break
          default:
            break
        }
      }
    },
    move (e) {
      // let odiv = e.target; //获取目标元素
      e.stopPropagation()
      e.stopImmediatePropagation()
      const odiv = document.getElementById('colorPicker')
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft
      const disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {
        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = e.clientX - disX
        const top = e.clientY - disY

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        // 移动当前元素
        odiv.style.position = 'absolute'
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
  watch: {
    curClickLayer () {
      if (this.curClickLayer >= 0) {
        this.calPosition()
      }
    }
  }
}
</script>

<style rel='stylesheet' lang='scss' scoped>
@import "../../assets/css/rule.scss";
.colorPicker {
  color: $fontColor;
  width: 510px;
  height: 240px;
  // position: absolute;
  // right: 35%;
  // top: 25%;
  z-index: 999;
  padding: 0px;
  border-radius: 10px;
  .close-btn {
    position: absolute;
    right: 0;
    font-weight: bold;
    line-height: 40px;
    top: 5px;
    right: 25px;
    z-index: 9999;
    cursor: pointer;
  }
  .color-level-select {
    text-align: center;
    height: 100%;
    width: 60px;
    box-sizing: border-box;
    padding-top: 5px;
    float: left;
  }
  .color-content {
    padding-top: 5px;
    box-sizing: border-box;
    width: calc(100% - 60px);
    text-align: center;
    padding-top: 5px;
    padding-left: 10px;
    height: 100%;
    float: left;
    li {
      list-style: none;
      float: left;
      overflow: hidden;
      width: 22px;
      margin: 0;
      padding: 0 0 0 3px;
      .color-item {
        margin: 0;
        padding: 0;
        width: 17px;
        display: block;
        height: 100%;
        border-top: 1px solid $borderColor;
        li {
          width: 17px;
          height: 17px;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          border-left: 1px solid $borderColor;
          border-right: 1px solid $borderColor;
        }
        li.bottom {
          width: 17px;
          height: 0;
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          border-bottom: 1px solid $borderColor;
        }
      }
      .color-item:hover {
        transform: scale(1.2, 1);
        border-top: 1px solid aqua;
        li {
          border-left: 1px solid aqua;
          border-right: 1px solid aqua;
          cursor: pointer;
        }
        li.bottom {
          border-bottom: 1px solid aqua;
        }
      }
    }
  }
}
</style>
<style rel='stylesheet' lang='scss'>
@import "./../../assets/css/rule.scss";
$backGroundColorLimit: #eaf1fb;
.colorPicker {
  .is-active {
    border-radius: 10px 10px 0 0 !important;
    background: $backGroundColorLimit !important;
    border: none !important;
    color: $fontColor !important;
  }
  .el-tabs--border-card {
    border-radius: 10px 10px 5px 5px;
    border: none;
    height: 240px;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  }
  .el-tabs--border-card > .el-tabs__header {
    border-radius: 5px 5px 0 0;
    // background: $colorBackground;
    border: none !important;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border-radius: 5px 5px 0 0;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
    color: $fontColor !important;
  }
}
</style>
